<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'



export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
      tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['各科绩点树',  '本专业绩点']
  },
  xAxis: [
    {
      type: 'category',
      data: ['课程1', '课程2', '课程3', '课程4', '课程5', '课程6', '课程7'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '各科绩点树',
      min: 0,
      max: 4,
      interval: 50,
      axisLabel: {
        formatter: '{value} '
      }
    },
    {
      type: 'value',
      name: '本专业绩点',
      min: 0,
      max:4 ,
      interval: 5,
      axisLabel: {
        formatter: '{value} '
      }
    }
  ],
  series: [
    {
      name: '各科绩点树',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value ;
        }
      },
      data: [
        2.0, 3, 1.0, 1.2, 2.6, 2.7, 3.6, 2.2, 1.6, 3.0, 3.4, 3.3
      ]
    },
  
    {
      name: '本专业绩点',
      type: 'line',
          
smooth:false,
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' °C';
        }
      },
      data: [2.0, 2.2, 3.3, 2.7, 3.6, 2.2, 1.6, 3.0, 3.4, 3.3,4.0,3]
    }
  ]
      })
    }
  }
}
</script>
